<template>
    <div style="height:100%;width:100%;" class="detail">
        <bar class="bar" @on-back="$router.back()" title="账户充值"></bar>
        <group class="account">
            <x-input title="用户名" v-model="name" disabled></x-input>
            <x-input title="当前余额" type="number" v-model="balance" disabled></x-input>
            <x-input title="充值金额" type="number" v-model="amount"></x-input>
            <x-input class="account-amount" title="充值后金额" type="number" v-model="amounts" disabled></x-input>
        </group>
        <div class="my-input">
            <x-button class="login-submit" @click.native="handle">充值</x-button>
        </div>
        <input-control title="充值" @pwdDone="handleInput" :isShow.sync="isShow"></input-control>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import {mapMutations} from 'vuex'
    import VUEX_NAME from '../../../store/constants.vue'
    import {
        Bar,
        Mask,
        InputControl
    } from 'muka-ui'
    import {
        Confirm,
        Group,
        XInput,
        XButton
    } from 'vux'
    import md5 from 'js-md5'
    export default {
        name: 'help',
        components: {
            Bar,
            Group,
            XInput,
            XButton,
            'mu-mask': Mask,
            Confirm,
            InputControl
        },
        data: function () {
            return {
                item:null,
                value: '',
                isShow: false,
                scrollShow: true,
                name: '',
                amount: 0,
                amounts: '0',
                balance: '',
                params: {},
                buttons: [{
                    type: 'primary',
                    text: '完成',
                    onClick: () => {
                        this.$router.push({
                            name: 'icUserInfo',
                            params: {
                                item: this.params
                            }
                        })
                    }
                }],
            }
        },
        created: async function () {
            if(this.$route.params.which === "1")
            {
                this.item = this.cardList[this.$route.params.index]
            }
            else
            {
                this.item = this.searchCardList[this.$route.params.index]
            }

            this.name = this.item.cardId + "["+ this.item.userName +"]"
            this.scrollShow = true
            this.amount = ''
            this.amounts = '0'
            this.balance = this.item.balance
        },
        watch: {
            amount: function (newVal) {
                this.amounts = (Number(newVal) + Number(this.balance)).toFixed(2)
            },
        },
        computed: mapState([
            VUEX_NAME.cardList,
            VUEX_NAME.searchCardList
        ]),
        methods: {
            ...mapMutations([
                VUEX_NAME.cCardList,
                VUEX_NAME.cSearchCardList
            ]),
            handle: function () {
                if (this.amount) {
                    this.isShow = true
                } else {
                    this.$vux.toast.show({
                        text: '请输入充值金额',
                        type: 'text',
                        position: 'middle'
                    })
                }
            },
            handleInput: function (password) {
                this.$ajax(
                    'card/recharge',
                    {
                        amount: Number(this.amount).toFixed(2),
                        cardId: this.item.cardId,
                        payPassword: md5(password)
                    },
                    (content) => {
                        this.item.balance = this.amounts
                        this.item.totalCharge = (Number(this.item.totalCharge) + Number(this.amount)).toFixed(2)
                        this.$router.back()
                    }, true, true)
            }
        }
    }

</script>

<style lang="less">
    .account {
        margin-top: 1.17647059em !important;
        .weui-cell__hd {
            font-size: 15px !important;
        }
        .weui-cell__bd {
            font-size: 15px !important;
        }
        .weui-label {
            width: 100px !important;
        }
    }

    .account-confirm-box {
        .weui-dialog__ft {
            display: none;
        }
    }

    .layout {
        background: white;
        position: absolute;
        top: ~'calc(30% - 72px)';
        text-align: center;
        border-radius: 3px;
        padding: 15px 0;
        width: 260px;
        left: ~'calc(50% - 130px)';
        line-height: 30px;
        .layout-title {
            font-size: 16px;
            border-bottom: 1px solid #b9b9b9;
        }
        .layout-label {
            font-size: 14px;
        }
        .layout-amount {
            font-size: 18px;
        }
        .layout-input {
            border: 1px solid #b9b9b9;
            margin: 0;
            padding: 0;
            letter-spacing: 24px;
            text-indent: 12px;
            outline: none;
            font-weight: 800;
            line-height: 35px;
            width: 100%;
            height: 35px;
            font-size: 40px;
            text-align: left;
        }
        .layout-repeat {
            position: absolute;
            display: inline-block;
            height: 35px;
            top: 1px;
            border-right: 1px solid #b9b9b9;
        }
    }

    .account-amount {
        .weui-cell__primary {
            color: #44b549
        }
    }

</style>
